<template>
  <div>
    <van-tabs :active="activeIndex" @change="tabClick" color="#f8c400" :border="false">
      <div v-for="(item, index) in listCategory" :key="index" >
        <van-tab :title="item.categoryName" title-style="font-size:32rpx;"></van-tab>
      </div>
    </van-tabs>
  </div>
</template>

<script>
  import { listAllGoodsCategory } from '@/api/distribution'
  export default {
    data() {
      return {
        isComponents: true,
        listCategory: []
      }
    },
    props: {
      activeIndex: {
        type: Number,
        default: 0
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
    },
    mounted() {
      // 组件第一次没有onShow，所以用mounted初始化
      this.initListCategory()
    },
    onShow() {
      this.initListCategory()
    },
    methods: {
      initListCategory() {
        listAllGoodsCategory(this.getMemberId).then((response) => {
          if (response.isError) return
          this.listCategory = response.data
          // 当前超过数组长度
          if (this.activeIndex > this.listCategory.length - 1) {
            this.activeIndex = 0
          }
          if (this.listCategory.length > 0) {
            this.setCategoryId()
          }
        }).catch(() => {
        })
      },
      tabClick(e) {
        this.activeIndex = e.mp.detail.index
        this.setCategoryId()
      },
      setCategoryId() {
        let categoryId = ''
        let categoryType = ''
        if (this.listCategory.length > 0) {
          categoryId = this.listCategory[this.activeIndex].categoryId
          categoryType = this.listCategory[this.activeIndex].categoryType
        }
        this.$emit('tabClick', categoryId, categoryType, this.activeIndex)
      }
    }
  }
</script>

<style scoped>

</style>
